<template>
    <div>
        <jgsearch
            :searchData="searchData"
            @on-input="searchaskData"
            @on-change-change="changeaskData"
            @on-change-Radio="changeRadio"
            @on-change-Checkbox="changeCheckbox"
            @on-change-Date="changeDate"
        >
            <template v-slot:rightbutton>
                <Button type="primary" class="ivu-mr-8" :disabled="total === 0" :loading="buttonloading" @click="clickexport">{{ buttonloading ? "正在导出" : "导出" }}</Button>
                <Button type="primary" v-if="buttonbool" class="ivu-mr-8" @click="clickexports">下载</Button>
                <Button v-if="added" type="primary" @click="handleedit(0)">录入</Button>
            </template>
        </jgsearch>
        <jgtable
            :data="list"
            :params="params"
            :columns="columns"
            :loading="loading"
            :total="total"
            @askData="askData"
            @handleedit="handleedit"
            @handleContactClue="handleContactClue"></jgtable>
        <createdrawer ref="createdrawer" @askData="askData"/>
        <contact ref="contact"/>
    </div>
</template>

<script>
import jgsearch from '../components/search'
import jgtable from '../components/table'
import createdrawer from './createdrawer'
import contact from './contact'
import mixin from "../components/mixin";
import Setting from "@/setting";
import { mapState, mapMutations } from "vuex";
import {
    clueuserentrylist,
    clueuserinfo,
    clueuserexport,
} from "@api/hqapi";
export default {
    name: 'entry', // 客服录入
    mixins: [mixin],
    components: { jgsearch, jgtable, createdrawer, contact },
    props: {
        booltimeButton: { type: Boolean, default: true },
        clue_status_id: { type: [String, Number], default: '' },
        ceshiButton: { type: Boolean, default: false },
        columnsHeader: { type: [String, Number], default: 0 },
        customer: { type: Boolean, default: false },
        added: { type: Boolean, default: false },
    },

    data() {
        const options = { disabledDate(date) { return date && date.valueOf() > Date.now() }}
        return {
            searchData: {
                left: [
                    { id: 0, style: {width: '250px'}, key: "Input", clearable: true, placeholder: "请输入姓名/手机号/微信号", value: "" },
                    { id: 22, style: {width: '100px'}, key: "TreeSelect", transfer:true, clearable: true, placeholder: "来源渠道", value: "", childList: [], callback: "change" },
                    { id: 23, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "部门", value: "", childList: [], callback: "change" },
                    { id: 24, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "客服人员", value: "", childList: [], callback: "change" },
                    { id: 25, style: {width: '100px'}, key: "Select", clearable: true, placeholder: "联系人员", value: "", childList: [], callback: "change" },
                    { id: 0, key: "DatePicker", type: "daterange", options: options, placeholder: "请选择创建日期", value: [new Date(),new Date()], callback: "Date" },
                    { id: 0, key: "RadioGroup", show: { show: true }, type:'button', value: 10, childList: [{ label: '近10天', value: 10 },{ label: '近30天', value: 30 },{ label: '近90天', value: 90 }], callback: "Radio"},
                    { id: 0, key: "CheckboxGroup", value: [], childList: [{ label: '重复', value: 1 },{ label: '手机号', value: 2 },{ label: '测试', value: 3, show: true }], callback: "Checkbox" }
                ],
                right: [
                    {key: 'slot',keys:'rightbutton'}
                ],
            },
            columns: [
                { title: "基本信息", slot: "entryinfo", fixed: "left", width: 150 },
                { title: "创建时间", key: "created_at", width: 160 },
                { title: "来源渠道", key: "source_channel", width: 100 },
                { title: "手机号", key: "mobile", width: 120 },
                { title: "录入人员", key: "input_name", width: 100 },
                { title: "客服备注", key: "customer_remark", minWidth: 120, ellipsis: true, tooltip: true },
                { title: "咨询备注", key: "advisory_remark", minWidth: 120, ellipsis: true, tooltip: true },
                { title: "联系人员", key: "contact_name", minWidth: 120, ellipsis: true, tooltip: true },
                { title: "渠道备注", key: "source_remark", minWidth: 120, ellipsis: true, tooltip: true },
                { title: "操作", key: "operation", slot: "entryoperation", fixed: "right", width: 220 }
            ],
            params: {
                departmentId: "",
                page: 1,
                pageSize: 10,
                keyword: "",
                clue_status_id: "",
                source_channel_id: "",
                input_id: "",
                contact_id: "",
                have_repeat: 0,
                contact_way: 0,
                start_date: new Date(),
                end_date: new Date(),
            },
        };
    },
    computed: {
        ...mapState("power/inputexport", [
            "buttonloading",
            "exporturl",
            "buttonbool",
        ]),
    },
    mounted() {
        clueuserinfo({id:0,type: 2}).then(res=>{
            this.device = res.operation_member;
            this.searchData.left.forEach(item => {
                if (item.id === 22) {
                    item.childList = res.source_channel.filter(item => +item.source_type === 0)
                } else if (item.id === 23) {
                    item.childList = res.department
                } else if (item.id === 24) {
                    item.childList = res.operation_member;
                } else if (item.id === 25) {
                    item.childList = res.contact_member;
                }
            });
        })
    },

    methods: {
        ...mapMutations("power/inputexport", [
            "changeLoading",
            "changebool",
            "changeUrl",
        ]),
        initial() {
            this.initials()
        },
        askData() {
            this.loading = true
            this.getparams()
            clueuserentrylist(this.params).then((res) => {
                this.list = Object.freeze(res.list);
                this.total = res.total;
                let params = { key: 'entry', total: res.total }
                this.$emit('returntotal', params);
                this.loading = false
            });
        },
        clickexport() {
            this.changeLoading(true);
            this.exporttext = "正在导出";
            this.changebool(false);
            let config = {
                clue_status_id: this.params.clue_status_id,
                input_id: this.params.input_id,
                contact_id: this.params.contact_id,
                source_channel_id: this.params.source_channel_id,
                start_date: this.params.start_date,
                end_date: this.params.end_date,
                keyword: this.params.keyword,
            };
            clueuserexport(config).then((res) => {
                this.exportloading = false;
                this.exporttext = "导出";
            });
        },
        clickexports() {
            let urltitle = Setting.apiBaseURL;
            let url = `${urltitle}/${this.exporturl}`;
            window.open(url);
        },
        handleedit(id) {
            this.$refs.createdrawer.initial(id)
        },
        handleContactClue(row) {
            this.$refs.contact.initial(row)
        },
    },
};
</script>

<style lang="scss" scoped>

</style>